<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css.css">
    <title>小米首页</title>
</head>
<body>
    <div class="kaitoudaohang">
      <div class="juzhong">
        <ul class="kaitoudaohangz">
          <li style="margin-left:117px;"><a href="#">MIUI</a></li>
          <li><a href="#">米聊</a></li>
          <li><a href="#">游戏</a></li>
          <li><a href="#">多看阅读</a></li>
          <li><a href="#">云服务</a></li>
        </ul>        
        <div class="login"style="padding-right:53px;">
            <a  href="#" style="margin-left: 6px;cursor:pointer;background:none;">登录</a>
            <a href="#" target="_blank"style="margin-right: 6px">注册</a>
            <a  href="#" style="margin-left: 6px;cursor:pointer;background:none;">台湾</a>
            <a href="#">香港</a>
            <a href="#">English</a>
            <div></div>
        </div>
      </div>
    </div>
    <div class="daohang2">
        <div class="miui">
            <h1><a href="#">MIUI</a></h1>
        </div>
        <div class="daohang2y">
            <ul>
                <li onMouseOver="sb()" style="margin-right:54px;"><div class="jz"><a href="#">论坛</a><div class="triangle-up" id="j1" style="display:none;"  ></div></div></li>
                <li onMouseOver="sb1()"><div class="jz"><a href="#">下载</a><div class="triangle-up" id="j2" style="display:none;"></div></div></li>
                <li onMouseOver="sb2()"><div class="jz"><a href="#">MIUI6</a><div class="triangle-up" id="j3" style="display:none;"></div></div></li>
                <li onMouseOver="sb3()"><div class="jz"><a href="#">首页</a><div class="triangle-up" id="j4" style="display:block;"></div></div></li>
            </ul>
        </div>
    </div>
    <div class="zhuti">  
        <div class="bt">
            <a href="#">MIUI<span style="color:#ff4a00">6</span></a>
            <div class="wenben">
                <a href="#">全球数百万发烧友共同创造，7000万用户好评如潮</a>
                <div class="jl"><a href="#">全新版本，轻装再出发</a></div>
            <a href="#"><input type="button" id="button" value="进入论坛"onclick="window.location.href('#')"></a>
            </div>
        </div>
        <div class="tu">
            <div class="yuan">
                <div class="circle img donut-front" alt="Donut front"></div>
                <div class="circle1 img donut-back"
                alt="Donut back"></div>
            </div>
            <div class="yuan1">
                <div class="circle2 img donut-front" alt="Donut front"></div>
                <div class="circle3 img donut-back"
                alt="Donut back"></div>            </div> 
            <div class="">
                <a href="#"><img src="miui_07.gif"></a>
            </div>
        </div>
    </div>
    <div class="zhutitu">
        <div class="zhutituli">
            <a href="#"><div class="tup1" id="tu1" onmouseover="qwe()">
                <div class="tup1l">                </div>
                <div class="tuzi">设计理念</div>
            </div>
            </a>
            <a href="#"><div class="tup2" id="tu1">
                <div class="tup2l">                </div>
                <div class="tuzi">强大功能</div>
            </div>
            </a>
            <a href="#"><div class="tup3" id="tu1">
                <div class="tup3l">                </div>
                <div class="tuzi">安全优化</div>
            </div>
            </a>
            <a href="#"><div class="tup4" id="tu1">
                <div class="tup4l">                </div>
                <div class="tuzi">云服务</div>
            </div>
            </a>     
        </div>
    </div>
    <div class="wenben2">
        <div class="wenbenz">
             <div class="wenbenzz">
                 <div class="wenbenzzs"><a href="#">MIUI已持续更新</a></div>
                 <div class="wenbenzzzh"><a href="#">214<span class="wenbenzzzhy">周</span></a></div>
                 <div class="wenbenzzx"><a href="#"style="color: #b9b9b9;">最新开发版 4.44.21</a></div>
             </div>
             <div class="wenbenzzh">
                 <div class="wenbenzzs">
                     <a href="#">更新日志</a>
                 </div>
                 <div class="wenbenzzhx">
                     <ul>
                         <li><a href="#">新增&nbsp;向右横划短信会标记为已读功能</a></li>
                         <li><a href="#">新增&nbsp;全部歌曲增加字母索引</a></li>
                         <li><a href="#">新增ID3、歌词、封面手动修改功能</a></li>
                         <li><a href="#">新增&nbsp;支持浏览器搜索歌曲</a></li>
                         <li><a href="#">优化&nbsp;加快对北斗的搜星速度</a></li>
                         <li><a href="#">查看完整更新日志&nbsp;></a></li>
                     </ul>
                 </div>
             </div>  
             <div class="wenbenzy">
                 <div class="wenbenzys">
                     <a href="#">最新视频</a>
                 </div>
                 <div class="wenbenzyx">
                     <a href="#"><img src="miui_05.gif"></a>
                 </div>
             </div>         
        </div>
        <div class="wenbeny">
            <div class="wenbenys">
                <a href="#"style="display:block;float:left">论坛热帖</a>
                <a href="#"style="display:block;float:right">更多></a>
            </div>
            <div class="sep"></div>
            <div class="wenbenyx">
                <a href="#"style="margin:0 0 0 19px;"><img src="miui_06.gif"></a>
                <ul class="wenbenyxzi">
                    <li><a href="#">MIUI的秘密&nbsp;日历我的生活小助手</a></li>
                    <li><a href="#">享受智能家居&nbsp;小米智能插座初体验</a></li>
                    <li><a href="#">MIUI6彩蛋&amp;隐藏功能集合</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="zhutitu1">
        <div class="wenbenz">
            <div class="zhutitu1s">
                <a href="#">MIUI出品</a>
            </div>
            <div class="sep1"></div>
            <div class="zhutitu1x">
                <a href="#"><img src="miui_08.gif">
                <div class="zhutitu1xz">应用商城</div></a>
                <a href="#"><img src="miui_09.gif"><div class="zhutitu1xz">主题商店</div></a>
                <a href="#"><img src="miui_010.gif"><div class="zhutitu1xz">小米云服务</div></a>
                <a href="#"><img src="miui_14.gif"><div class="zhutitu1xz">小米桌面</div></a>
                <a href="#"><img src="miui_11.gif"><div class="zhutitu1xz">小米系统</div></a>
                <a href="#"><img src="miui_12.gif"><div class="zhutitu1xz">小米助手</div></a>
            </div>
        </div>
        <div class="wenbeny">
                    <div class="wenbenys">
                        <a href="#" style="display:block;float:left">极客秀</a>
                        <a href="#" style="display:block;float:right">更多&gt;</a>
                    </div>
                    <div class="sep"></div>
                    <div class="wenbenyx">
                        <a href="#" style="margin:0 0 0 19px;"><img src="miui_13.gif"></a>
                        <ul class="wenbenyxzi">
                            <li><a href="#">如何给小米3刷上Android5.0？</a></li>
                            <li><a href="#">帮父母升级MIUI6之后注意的七件事</a></li>
                            <li><a href="#">49.9元小米新品！8G优盘版随身WIFI</a></li>
                        </ul>
                    </div>
                </div>
    </div>
    <div class="zhutizuixia">
        <div class="daohanan">
            <a href="#"><div class="daohananli">
                了解MIUI6
            </div></a>
            <div class="sep2"></div>
            <a href="#"><div class="daohananli1">
                下载MIUI
            </div></a>
            <div class="sep2"></div>  
            <a href="#"><div class="daohananli2">
                进入论坛
            </div></a>                      
        </div>
    </div>
    <div class="xiabudh">
        <div class="xiabudhli">
            <div class="xiabudhs">
                <div class="xiabudhsy">
                    <div class="xiabudhsys">
                        <a href="#">论坛</a>
                    </div>
                    <div class="xiabudhsyx">
                        <ul>
                            <li><a href="#">机型版块</a></li>
                            <li><a href="#">MIUI专区</a></li>
                            <li><a href="#">极客秀</a></li>
                            <li><a href="#">线下活动</a></li>
                        </ul>
                    </div>
                </div>
                <div class="sep3"></div> 
                 <div class="xiabudhsy">
                    <div class="xiabudhsys">
                        <a href="#">产品</a>
                    </div>
                    <div class="xiabudhsyx">
                        <ul>
                            <li><a href="#">4.11.21</a></li>
                            <li><a href="#">刷机教程</a></li>
                            <li><a href="#">四格报告</a></li>
                            <li><a href="#">内测申请</a></li>
                        </ul>
                    </div>
                </div>
                <div class="sep3"></div> 
                <div class="xiabudhsy">
                    <div class="xiabudhsys">
                        <a href="#">社交</a>
                    </div>
                    <div class="xiabudhsyx">
                        <ul>
                            <li><a href="#">MIUI微博</a></li>
                            <li><a href="#">社区微博</a></li>
                            <li><a href="#">百度贴吧</a></li>
                            <li><a href="#">MIUI微信</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="xiabudhzh">
                <div class="sep4"></div> 
                <div class="xiabudhan">
                    <div class="upparrow"></div>
                </div>
                <div><a href="#">粉丝站</a></div>
                <div class="xiabudhx"><a href="#">MIUI 为发烧而生！</a></div>
                <div class="xiabudhx"><a href="#">Copyright@2014 MIUI 京ICP备10046444号</a></div>
                <div class="xiabudhx"><a href="#"><img src="底部.png"></a></div>

            </div>
        </div>
    </div>

<script type="text/javascript">
var div = document.getElementById('j1');
var div1 = document.getElementById('j2');
var div2 = document.getElementById('j3');
var div3 = document.getElementById('j4');
    function sb()
       {
        div.style.display="block"; 
        div1.style.display="none";
        div2.style.display="none";    
        div3.style.display="none"; 
        }
    function sb1()
       {
        div.style.display="none"; 
        div1.style.display="block";
        div2.style.display="none";    
        div3.style.display="none"; 
        }
    function sb2()
       {
        div.style.display="none"; 
        div1.style.display="none";
        div2.style.display="block";    
        div3.style.display="none"; 
        }
    function sb3()
       {
        div.style.display="none"; 
        div1.style.display="none";
        div2.style.display="none";    
        div3.style.display="block"; 
        }                


        var element = document.getElementById("tu1");
        var r = 0;
        var i = 1;
    function qwe(){
        function rotate(){
            r += i;
            if( Math.abs(r) >= 2 ) i*=-1
            element.style.MozTransform = "rotate(" + r + "deg)";
            element.style.webkitTransform ="rotate(" + r + "deg)";
            element.style.msTransform = "rotate(" + r + "deg)";
            element.style.OTransform = "rotate(" + r + "deg)";
            element.style.transform = "rotate(" + r + "deg)";
        }
        var timer = setInterval(rotate,100);
        element.onmouseover = function(){
            clearInterval(timer);
            timer = null;
        };
        element.onmouseout = function(){
            if(timer)return;
            timer = setInterval(rotate,100);
        };}



</script>
</body>
</html>